<%--
  Created by IntelliJ IDEA.
  User: Boss
  Date: 2021/5/11
  Time: 14:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
        .btName{
            width: 80px;
            height: 38px;
            background-color: #009f95;
            border: #009f95;
            position: absolute;
            top: 0px;
        }
        .rpName{
            width: 80px;
            height: 38px;
            background-color: #009f95;
            border: #009f95;
            position: absolute;
            top: 0px;
        }
        #hidden{
            width: 500px;
            height: 450px;
            border: #e8e8e8 solid 1px;
            padding-right: 40px;
            padding-top: 50px;
            position: absolute;
            left: 450px;
            background-color: #e8e8e8;
            display: none;
            top: 100px;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
</head>
<%
    String path=request.getContextPath();
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<body>
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">用户借书</li>
        <li>用户还书</li>
        <li>违约记录</li>
        <li>还书记录</li>
    </ul>
    <div class="layui-tab-content">
        <%--        用户借书--%>
        <div class="layui-tab-item layui-show">
            <form action="<%=basePath%>BorrowServlet?opr=insert" method="post">
                <div class="layui-form-item">
                    <label class="layui-form-label">读者卡号</label>
                    <div class="layui-input-block">
                        <input type="text" name="cardId" required  lay-verify="required" placeholder="请输入读者卡号" autocomplete="off" class="layui-input jCardId">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">书籍编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="bookId" required  lay-verify="required" placeholder="请输入书籍编号" autocomplete="off" class="layui-input jBookId">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">借阅时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="startTime" required  lay-verify="required" placeholder="请输入借阅时间" autocomplete="off" class="layui-input jStartTime">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">约定天数</label>
                    <div class="layui-input-block">
                        <input type="text" name="day" required  lay-verify="required" placeholder="请输入约定天数" autocomplete="off" class="layui-input jDay">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">联系电话</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" required  lay-verify="required" placeholder="请输入联系电话" autocomplete="off" class="layui-input jPhone">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="button" name="BeOverdue" class="layui-btn" lay-submit lay-filter="formDemo" value="确认借书">
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        <%--                        <input type="button" name="bt" value="确认借书" class="layui-btn">--%>
                    </div>
                </div>
            </form>
        </div>
        <%--        用户还书--%>
        <div class="layui-tab-item">
            <form action="<%=basePath%>BorrowServlet?opr=insertSelect" method="post">
                <div class="layui-form-item">
                    <label class="layui-form-label">读者卡号</label>
                    <div class="layui-input-block">
                        <input type="text" name="cardId" required  lay-verify="required" placeholder="请输入读者卡号" autocomplete="off" class="layui-input hCardId">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">书籍编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="bookId" required  lay-verify="required" placeholder="请输入书籍编号" autocomplete="off" class="layui-input hBookId">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">归还时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="endTime" required  lay-verify="required" placeholder="请输入归还时间" autocomplete="off" class="layui-input hEndTime">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="button" name="HTrue" class="layui-btn" lay-submit lay-filter="formDemo" value="确认还书">
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        <%--                        <input type="button" name="bt" value="确认借书" class="layui-btn">--%>
                    </div>
                </div>
            </form>
            <%--            违约弹出层--%>
            <div id="hidden">
                <h3 style="text-align: center;margin-top: -35px">新增违约</h3>
                <br>
                <form class="layui-form" action="<%=basePath%>BorrowServlet?opr=findInsert" method="post">
                    <div class="layui-form-item">
                        <label class="layui-form-label">读者卡号</label>
                        <div class="layui-input-block">
                            <input type="text" name="cardId" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input wCardId">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">书籍编号</label>
                        <div class="layui-input-block">
                            <input type="text" name="bookId" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input wBookId">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">借书时间</label>
                        <div class="layui-input-block">
                            <input type="text" name="startTime" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input wStartTime">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">约定天数</label>
                        <div class="layui-input-block">
                            <input type="text" name="day" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input wDay">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">归还时间</label>
                        <div class="layui-input-block">
                            <input type="text" name="endTime" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input wEndTime">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">违约类型</label>
                        <div class="layui-input-block">
                            <select name="type" lay-verify="required" class="wType">
                                <option value=""></option>
                                <option value="1">失约</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">违约金额</label>
                        <div class="layui-input-block">
                            <input type="text" name="money" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input wMoney">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input type="button" name="ReBeOverdue" class="layui-btn zBeOver" lay-submit lay-filter="formDemo" value="增加">
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            <input type="button" name="ReNoN" class="layui-btn"  value="关闭">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <%--        违约记录查询--%>
        <div class="layui-tab-item">
            <form action="<%=basePath%>BorrowServlet?opr=CBeOverdue" method="post">
                <div class="layui-form-item">
                    <label class="layui-form-label">姓名：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="cardName"  placeholder="请输入..." autocomplete="off" class="layui-input cardName">
                    </div>
                    <div class="layui-form-mid layui-word-aux"><input name="bt" type="button" value="查询" class="btName"></div>
                </div>
            </form>
            <table id="demo" lay-filter="test"></table>
        </div>
        <%--    借书记录查询--%>
        <div class="layui-tab-item">
            <form action="<%=basePath%>BorrowServlet?opr=YouFindRepay" method="post">
                <div class="layui-form-item">
                    <label class="layui-form-label">姓名：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="repayName"  placeholder="请输入..." autocomplete="off" class="layui-input repayName">
                    </div>
                    <div class="layui-form-mid layui-word-aux"><input name="bt" type="button" value="查询" class="rpName"></div>
                </div>
            </form>
            <table id="demo1" lay-filter="test"></table>
        </div>
        <div class="layui-tab-item">内容5</div>
    </div>
</div>
<script src="layui/layui.js"></script>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        // 确认借书
        $("input[name='BeOverdue']").click(function () {
            let cardId = $(".jCardId").val();
            let bookId = $(".jBookId").val();
            let startTime = $(".jStartTime").val();
            let day = $(".jDay").val();
            let phone = $(".jPhone").val();
            $.ajax({
                url: "BorrowServlet?opr=insert",
                type: "post",
                data: {
                    cardId: cardId,
                    bookId: bookId,
                    startTime: startTime,
                    day: day,
                    phone: phone
                },
                dateType: "json",
                success: function (date) {
                    if (date) {
                        layer.open({
                            content: '借书成功！',
                            success: function (layero, index) {
                                console.log(layero, index);
                            }
                        });
                    } else {
                        layer.open({
                            content: '借书失败！',
                            success: function (layero, index) {
                                console.log(layero, index);
                            }
                        });
                    }
                }
            })
        })
        //确认还书
        $("input[name='HTrue']").click(function () {
            let cardId = $(".hCardId").val();
            let BookId = $(".hBookId").val();
            let EndTime = $(".hEndTime").val();
            $.ajax({
                url: "BorrowServlet?opr=insertSelect",
                type: "post",
                data: {
                    cardId: cardId,
                    bookId: BookId,
                    endTime: EndTime
                },
                dataType: "json",
                success: function (date) {
                    if (date) {
                        layer.open({
                            content: '还书成功！',
                            success: function (layero, index) {
                                console.log(layero, index);
                            }
                        });
                        $.ajax({
                            url: "BorrowServlet?opr=day",
                            type: "post",
                            data: {
                                id:cardId,
                                bookId: BookId
                            },
                            dataType: "json",
                            success:function (date) {
                                if (date){
                                    $.ajax({
                                        url:"BorrowServlet?opr=find",
                                        type:"post",
                                        data:{
                                            cardId:cardId,
                                            bookId:BookId
                                        },
                                        dataType:"json",
                                        success:function (data) {
                                            var hCardId=$(".hCardId").val();
                                            var hBookId=$(".hBookId").val();
                                            var hEndTime=$(".hEndTime").val();
                                            $(".wCardId").val(hCardId);
                                            $(".wBookId").val(hBookId);
                                            $(".wEndTime").val(hEndTime);
                                            $(".wStartTime").val(data.startTime);
                                            $(".wDay").val(data.day);
                                            $("#hidden").show();
                                        }
                                    })
                                    layer.msg('该用户已违约！');
                                }
                            }
                        })
                    }else {
                        layer.open({
                            content: '还书失败！',
                            success: function (layero, index) {
                                console.log(layero, index);
                            }
                        });
                    }
                }
            })
        })
        /**
         * 新增违约表
         */
        $(".zBeOver").click(function () {
            let cardId=$(".wCardId").val();
            let bookId=$(".wBookId").val();
            let startTime=$(".wStartTime").val();
            let day=$(".wDay").val();
            let endTime=$(".wEndTime").val();
            let type=$(".wType").val();
            let money=$(".wMoney").val();
            $.ajax({
                url:"BorrowServlet?opr=findInsert",
                type:"post",
                data:{
                    cardId:cardId,
                    bookId:bookId,
                    startTime:startTime,
                    day:day,
                    endTime:endTime,
                    type:type,
                    money:money
                },
                dataType:"json",
                success:function (data) {
                    if (data){
                        layer.msg('增加成功！');
                        $("#hidden").hide();
                    }else {
                        layer.msg('增加失败！');
                    }
                }
            })
        })
        $("input[name='ReNoN']").click(function () {
            $("#hidden").hide()
        })
    })
    /**
     * 违约分页查询
     */
    layui.use('table', function(){
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 312,
            id:'test'
            ,url: 'BorrowServlet?opr=CBeOverdue' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: '编号', width:100, sort: true, fixed: 'left'}
                ,{field: 'cardId', title: '读者卡号', width:100}
                ,{field: 'name', title: '读者姓名', width:100}
                ,{field: 'bookId', title: '书籍编号', width:110, sort: true}
                ,{field: 'startTime', title: '借书时间', width:150}
                ,{field: 'day', title: '约定天数', width: 100}
                ,{field: 'endTime', title: '归还时间', width: 150}
                ,{field: 'retype', title: '违约类型', width: 100}
                ,{field: 'money', title: '违约金', width: 100}
                // ,{field: 'wealth', title: '其它操作', width: 135, sort: true}
            ]],
            where:{
                name:""
            }
        });
        $(function () {
            $(".btName").click(function () {
                table.reload('test',{
                    page:{
                        curr:1
                    },
                    where: {
                        name:$("input[name='cardName']").val()
                    }
                });
            })
        })
    });
    /**
     * 还书分页
     */
    layui.use('table', function(){
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo1'
            ,height: 312,
            id:'Retest'
            ,url: 'BorrowServlet?opr=YouFindRepay' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: '编号', width:100, sort: true, fixed: 'left'}
                ,{field: 'cardId', title: '读者卡号', width:100}
                ,{field: 'name', title: '读者姓名', width:100}
                ,{field: 'bookId', title: '书籍编号', width:110, sort: true}
                ,{field: 'startTime', title: '借书时间', width:150}
                ,{field: 'day', title: '约定天数', width: 100}
                ,{field: 'endTime', title: '归还时间', width: 150}
                ,{field: 'phone', title: '电话号码', width: 100}
                // ,{field: 'money', title: '违约金', width: 100}
                // ,{field: 'wealth', title: '其它操作', width: 135, sort: true}
            ]],
            where:{
                name:""
            }
        });
        $(function () {
            $(".rpName").click(function () {
                table.reload('Retest',{
                    page:{
                        curr:1
                    },
                    where: {
                        name:$("input[name='repayName']").val()
                    }
                });
            })
        })
    });
</script>
</body>
</html>
